<template>
  <van-tabbar
    v-if="falge"
    v-model="active"
    cative-color="#ee0a24"
    inactive-color="#000"
    @change="onchange"
  >
    <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
    <van-tabbar-item icon="label-o" to="/topic">专题</van-tabbar-item>
    <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item>
    <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "AppTabBar",
  data() {
    return {
    };
  },
  methods: {
    onchange(m) {
      console.log(m);
      this.active = m;
    },
  },
  computed: {
    ...mapState(["falge"]),
    active: {
      get() {
        let num = 0;
        if (this.$route.path == "/home") {
          num = 0;
        } else if (this.$route.path == "/topic") {
          num = 1;
        } else if (this.$route.path == "/category") {
          num = 2;
        } else if (this.$route.path == "/cart") {
          num = 3;
        }else if (this.$route.path == "/user") {
          num = 4;
        }
        return num
      },
      set(val){
        console.log(val);
      }
    },
  },
};
</script>

<style>

</style>